<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="theme-color" content="#000000" />
        <meta name="name" content="PyScript/Panel KMeans Demo" />

        <title>Pyscript/Panel KMeans Demo</title>
        <link rel="icon" type="image/x-icon" href="./favicon.png" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
            type="text/css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css"
            type="text/css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css"
            type="text/css"
        />

        <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/vega@5"
        ></script>
        <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/vega-lite@5"
        ></script>
        <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/vega-embed@6"
        ></script>
        <script
            type="text/javascript"
            src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"
        ></script>
        <script
            type="text/javascript"
            src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"
        ></script>
        <script
            type="text/javascript"
            src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
        ></script>
        <script
            type="text/javascript"
            src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
        ></script>
        <script
            type="text/javascript"
            src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js"
        ></script>
        <script type="text/javascript">
            Bokeh.set_log_level("info");
        </script>

        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css"
        />

        <style>
            #sidebar {
                width: 350px;
            }
        </style>

        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

        <link
            rel="stylesheet"
            href="https://pyscript.net/latest/pyscript.css"
        />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
        <link rel="stylesheet" href="./assets/css/examples.css" />
    </head>

    <body>
        <nav class="navbar" style="background-color: #000000">
            <div class="app-header">
                <a href="/">
                    <img src="./logo.png" class="logo" />
                </a>
                <a class="title" href="" style="color: #f0ab3c"
                    >Panel KMeans Clustering Demo</a
                >
            </div>
        </nav>
        <section class="pyscript">
            <div class="row overflow-hidden" id="content">
                <div class="sidenav" id="sidebar">
                    <ul class="nav flex-column">
                        <div class="bk-root" id="x-widget"></div>
                        <div class="bk-root" id="y-widget"></div>
                        <div class="bk-root" id="n-widget"></div>
                    </ul>
                </div>
                <div class="col mh-100 float-left" id="main">
                    <div class="bk-root" id="intro"></div>
                    <div class="bk-root" id="cluster-plot"></div>
                    <div class="bk-root" id="table"></div>
                </div>
            </div>
            <py-tutor>
                <py-config>
                    packages = [
                      "https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
                      "altair",
                      "numpy",
                      "pandas",
                      "scikit-learn",
                      "panel==0.13.1"
                    ]
                    plugins = [
                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
                    ]
                </py-config>

                <py-script>
                    import altair as alt
                    import panel as pn
                    import pandas as pd

                    from sklearn.cluster import KMeans
                    from pyodide.http import open_url

                    pn.config.sizing_mode = 'stretch_width'

                    url = 'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv'
                    penguins = pd.read_csv(open_url(url)).dropna()
                    cols = list(penguins.columns)[2:6]

                    x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm').servable(target='x-widget')
                    y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm').servable(target='y-widget')
                    n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3).servable(target='n-widget')

                    brush = alt.selection_interval(name='brush')  # selection of type "interval"

                    def get_clusters(n_clusters):
                        kmeans = KMeans(n_clusters=n_clusters)
                        est = kmeans.fit(penguins[cols].values)
                        df = penguins.copy()
                        df['labels'] = est.labels_.astype('str')
                        return df

                    def get_chart(x, y, df):
                        centers = df.groupby('labels').mean()
                        return (
                            alt.Chart(df)
                                .mark_point(size=100)
                                .encode(
                                    x=alt.X(x, scale=alt.Scale(zero=False)),
                                    y=alt.Y(y, scale=alt.Scale(zero=False)),
                                    shape='labels',
                                    color='species'
                                ).add_selection(brush).properties(width=800) +
                            alt.Chart(centers)
                                .mark_point(size=250, shape='cross', color='black')
                                .encode(x=x+':Q', y=y+':Q')
                        )

                    intro = pn.pane.Markdown("""
                    This app provides an example of **building a simple dashboard using
                    Panel**.\n\nIt demonstrates how to take the output of **k-means
                    clustering on the Penguins dataset** using scikit-learn,
                    parameterizing the number of clusters and the variables to
                    plot.\n\nThe plot and the table are linked, i.e. selecting on the plot
                    will filter the data in the table.\n\n The **`x` marks the center** of
                    the cluster.
                    """).servable(target='intro')

                    chart = pn.pane.Vega().servable(target='cluster-plot')
                    table = pn.widgets.Tabulator(pagination='remote', page_size=10).servable(target='table')

                    def update_table(event=None):
                        table.value = get_clusters(n_clusters.value)

                    n_clusters.param.watch(update_table, 'value')

                    @pn.depends(x, y, n_clusters, watch=True)
                    def update_chart(*events):
                        chart.object = get_chart(x.value, y.value, table.value)
                        chart.selection.param.watch(update_filters, 'brush')

                    def update_filters(event=None):
                        filters = []
                        for k, v in (getattr(event, 'new') or {}).items():
                            filters.append(dict(field=k, type='>=', value=v[0]))
                            filters.append(dict(field=k, type='<=', value=v[1]))
                        table.filters = filters

                    update_table()
                    update_chart()
                </py-script>
            </py-tutor>
        </section>
        <script>
            $(document).ready(function () {
                $("#sidebarCollapse").on("click", function () {
                    $("#sidebar").toggleClass("active");
                    $(this).toggleClass("active");
                    var interval = setInterval(function () {
                        window.dispatchEvent(new Event("resize"));
                    }, 10);
                    setTimeout(function () {
                        clearInterval(interval);
                    }, 210);
                });
            });
        </script>
    </body>
</html>
